﻿<div class="modal fade" id="locationModelsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 1424px; height: 900px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="font-size: 40px;">&times;</button>
                <h4 class="modal-title">Где лежит?</h4>
            </div>
            <div class="modal-body" style="padding: 0;">
                <table>
                    <tr>
                        <td>
                            <!-- ko if: locationComplect() != null -->
                            <div id="locationComplect" data-bind="visible: showLocComplect(), template: { name: 'location-template', foreach: locationComplect }"></div>
                            <!-- /ko -->
                            <!-- ko if: locationModel != null -->
                            <div id="locationModel" data-bind="visible: !showLocComplect(), with: locationModel">
                                <!-- ko template: {name: 'location-template'} -->
                                <!-- /ko -->
                            </div>
                            <!-- /ko -->
                            <img alt="" width="1400" height="900" data-bind="attr: { src: shopMapUrl() }" /></td>
                    </tr>
                    <tr>
                        <td style="text-align: center" class="top">
                            <button type="button" data-bind="css: { 'button-submit-red': showLocComplect(), 'button-submit': !showLocComplect() }, click: $root.showComplectLocation">Показать комплект</button>
                            <button type="button" data-bind="css: { 'button-submit-red': !showLocComplect(), 'button-submit': showLocComplect() }, click: $root.showModelLocation">Показать модель</button>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="location-template">
    <div style="position: absolute; width: 42px; height: 42px; opacity: 1;" data-bind="attr: { name: 'location-' + ModelId, 'data-x': CoordinateX, 'data-y': CoordinateY }">
        <span class="location-marker" data-bind="text: CatNumber"></span>
    </div>
</script>

